<template>
	<view class="pages-map" :style="{background:pageColor}">

		<block v-if="isLoad">
			<block v-if="configInfo.plugAuth.map">

				<fixed @height="initFixHeight" :zIndex="990">
					<view class="fill-base" style="height:196rpx">
						<view class="map-info flex-between pd-lg">
							<view @tap.stop="toChooseLocation" class="flex-y-center">
								<i class="iconfont iconjuli mr-sm"></i>
								<view class="f-mini-title c-title max-400 ellipsis">
									<block v-if="configInfo.user_update_location"> {{location | handleAddrText}}
									</block>
									<block v-else>{{city_info | handleCityText}} </block>
								</view>
								<i class="iconfont icon-down"></i>
							</view>
							<view class="map-list-item flex-y-center">
								<view @tap.stop="$util.goUrl({url:`/pages/technician`})"
									class="list-btn flex-center f-icontext rel" style="border-right: none;">
									<i class="iconfont iconliebiaomoshi2"></i>
									列表
								</view>
								<view class="list-btn flex-center f-icontext rel"
									:style="{color:primaryColor,borderColor:primaryColor}">
									<view class="list-btn abs" :style="{background:primaryColor}">
									</view>
									<i class="iconfont icondituzhaoren2"></i>
									地图
								</view>
							</view>
						</view>

						<view class="tab-info flex-center pl-md pr-md">
							<view class="tab-list-item">
								<tab @change="handerTabChange" :list="service_cate" :activeIndex="param.activeIndex*1"
									:activeColor="primaryColor" height="80rpx" fontSize="28rpx" :numberType="2"
									lineClass="sm">
								</tab>
							</view>
						</view>
					</view>
				</fixed>
				<block v-if="location.lat && location.lng">
					<!-- #ifdef APP-PLUS -->
					<a-map ref="amap" @detail="goDetail" :info="{amapKey:configInfo.amap_key,location,mapList}"
						:style="{height: `calc(100vh - ${popupHeight + configInfo.tabbarHeight}px)`}"
						style="overflow: hidden;"></a-map>
					<!-- #endif -->
					<!-- #ifndef APP-PLUS -->
					<map class="map-box" :style="{height: `calc(100vh - ${popupHeight + configInfo.tabbarHeight}px)`}"
						:show-location="false" :controls="map.controls" :scale="map.scale" :latitude="map.latitude"
						:longitude="map.longitude" :markers="covers" @callouttap="goDetail" @markertap="goDetail"></map>
					<!-- #endif -->
				</block>

				<block v-if="!location.lat&&!location.lng">
					<!-- #ifdef H5 -->
					<abnor type="NOT_LOCATION" :isCenter="true"></abnor>
					<!-- #endif -->
					<!-- #ifndef H5 -->
					<abnor type="NOT_LOCATION" @confirm="toOpenLocation" :button="[{ text: '开启定位' , type: 'confirm' }]"
						btnSize="" :isCenter="true"></abnor>
					<!-- #endif -->
				</block>
			</block>
			<block v-else>
				<abnor type="NOT_AUTH" :isCenter="true"></abnor>
			</block>


			<uni-popup ref="technician_info_item" type="center">
				<view @touchmove.stop.prevent class="technician-info-popup fill-base ml-lg mr-lg radius-16"
					v-if="detail.id">
					<image @tap.stop="goInfo" mode="aspectFill" class="work-img" :src="detail.work_img"></image>
					<view @tap.stop="goInfo" class="pt-lg pl-lg pr-lg">
						<view class="flex-between">
							<view class="f-title c-black text-bold max-400">{{detail.coach_name || '-'}}</view>
							<view class="flex-center">
								<i class="iconfont iconjuli" :style="{color:primaryColor}"></i>
								<view class="f-desc c-title" style="line-height: 1;margin-bottom: 4rpx">
									{{detail.distance}}
								</view>
							</view>
						</view>
						<view class="flex-y-center mt-sm">
							<view class="service-label flex-center f-icontext">
								{{configInfo.btn_config[detail.text_type*1-1].text}}
							</view>
							<view class="time-label flex-y-center ml-md f-icontext c-paragraph" v-if="detail.near_time">
								<view class="near-text flex-center">最早可约</view>
								<view class="near-time flex-center c-base rel" :style="{color:primaryColor}">
									<view class="bg abs" :style="{background:primaryColor}"></view>
									{{detail.near_time}}
								</view>
							</view>
						</view>
						<view class="flex-y-center mt-lg f-icontext c-caption"
							v-if="(configInfo.merchant_switch_show && detail.admin_id && detail.merchant_name) || (configInfo.plugAuth.store && detail.store_id && detail.store_name)">
							<i class="iconfont iconshangjia_1"
								v-if="configInfo.merchant_switch_show && detail.admin_id && detail.merchant_name"></i>
							<i class="iconfont icondianpu" v-else></i>
							<view class="max-500 ellipsis">
								{{configInfo.merchant_switch_show && detail.admin_id && detail.merchant_name ? detail.merchant_name : detail.store_name}}
							</view>
						</view>
						<view class="space-md" v-else></view>
						<view class="flex-y-center f-icontext c-caption mt-sm">
							<view class="flex-y-baseline">
								<i class="iconfont iconpingfen1 icon-font-color"></i>
								<view class="star-text flex-y-center f-caption">{{detail.star || 0}}</view>
							</view>
							<view class="flex-y-center" v-if="detail.show_salenum">
								<view class="line"></view>
								<view>已服务{{detail.order_num>9999?'9999+':detail.order_num}}单</view>
							</view>
							<view class="flex-y-center" v-if="detail.industry_data.employment_years">
								<view class="line"></view>
								<view>从业{{detail.work_time}}年</view>
							</view>
						</view>
					</view>
					<view class="pd-lg">
						<!-- #ifdef H5 -->
						<view class="introduce-info pd-lg f-paragraph c-title radius-16 ellipsis-5">
						<!-- #endif -->
							<!-- #ifndef H5 -->
							<view class="introduce-info pd-lg f-paragraph c-title radius-16">
							<!-- #endif -->
								<text decode="emsp" style="word-break:break-all;">{{detail.text}}</text>
							</view>
						</view>
					</view>
					<view @tap.stop="toPopup('technician_info_item','close')" class="flex-center mt-lg"><i
							class="iconfont icon-close c-base"></i></view>
			</uni-popup>

			<view :style="{height: `${configInfo.tabbarHeight}px`}"></view>
			<longbingbing-tabbar :cur="2"></longbingbing-tabbar>

			<!-- #ifdef APP-PLUS -->
			<longbingbing-login-info></longbingbing-login-info>
			<longbingbing-app-check-auth type="location" ref="app_check_item"
				@confirm="toConfirmAppCheckAuth"></longbingbing-app-check-auth>
			<!-- #endif -->
		</block>


		<!-- #ifdef APP-PLUS -->
		<longbingbing-open-location-info ref="open_location_info"></longbingbing-open-location-info>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<user-privacy ref="user_privacy" :show="false"></user-privacy>
		<!-- #endif -->
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	import siteInfo from '@/siteinfo.js';
	import aMap from "@/components/amap.vue"
	import longbingbingTechnicianListItem from "@/components/longbingbing-technician-list-item.vue"
	import longbingbingTechnicianListPopup from "@/components/longbingbing-technician-list-popup.vue"
	export default {
		components: {
			aMap,
			longbingbingTechnicianListItem,
			longbingbingTechnicianListPopup,
		},
		data() {
			return {
				isLoad: false,
				options: {},
				navTitle: '',
				popupHeight: '',
				detail: {},
				mapSrc: '',
				loading: true,
				lockTap: false,
				popupTap: false,
				appMethod: ''
			}
		},
		computed: mapState({
			pageActive: state => state.map.pageActive,
			param: state => state.map.param,
			service_cate: state => state.map.service_cate,
			mapList: state => state.map.mapList,
			map: state => state.map.map,
			covers: state => state.map.covers,
			technicianParam: state => state.technician.param,
			configInfo: state => state.config.configInfo,
			isGzhLogin: state => state.user.isGzhLogin,
			loginType: state => state.user.loginType,
		}),
		async onLoad(options) {
			let launch = 0
			// #ifdef MP-WEIXIN 
			let {
				scene
			} = await uni.getLaunchOptionsSync()
			launch = scene // 1154：朋友圈
			options.launch = launch
			// #endif
			options = await this.updateCommonOptions(options)
			let {
				pid = 0,
			} = options
			options.pid = pid * 1
			this.options = options
			// #ifdef MP-WEIXIN
			uni.showShareMenu({
				menus: ['shareAppMessage', 'shareTimeline']
			})
			// #endif
			let {
				realtime_location = 0
			} = this.configInfo
			let {
				pageActive,
				changeAddr
			} = this
			if (!pageActive) {
				this.$util.showLoading()
			}
			if (pageActive && (!realtime_location && !changeAddr) && !pid) {
				this.$util.setNavigationBarColor({
					bg: this.primaryColor
				})
				this.isLoad = true
				this.loading = false
				this.$util.hideAll()
				this.initNavTitle()
				return
			}
			await this.initIndex()
			this.initNavTitle()

		},
		async onShow() {
			console.log("====onShow map")
			this.initNavTitle(this.appShare ? 0 : 1)

			if (!this.location.lat && this.locaRefuse) {
				this.toResetUtilLoca()
			}

			let {
				status: coach_status = 0,
				coach_position = 0
			} = this.userCoachStatus
			let {
				realtime_location = 0
			} = this.configInfo

			if (this.pageActive && !realtime_location && coach_position && coach_status == 2) {
				this.$util.getCoachUtilLoca()
			}

		},
		onPullDownRefresh() {
			// #ifndef APP-PLUS
			uni.showNavigationBarLoading()
			// #endif 
			if (this.configInfo.realtime_location) {
				this.updateUserItem({
					key: 'changeAddr',
					val: false
				})
			}
			this.initRefresh();
			uni.stopPullDownRefresh()
		},
		onShareTimeline() {
			let {
				navTitle: title
			} = this
			let {
				app_logo
			} = this.configInfo
			let imageUrl = app_logo || ''
			let {
				id: pid = 0
			} = this.userInfo
			let query = `pid=${pid}`
			return {
				title,
				imageUrl,
				query
			}
		},
		onShareAppMessage(e) {
			let {
				navTitle: title
			} = this
			let {
				id: pid = 0
			} = this.userInfo
			let path = `/pages/map?pid=${pid}`
			this.$util.log(path)
			return {
				title,
				imageUrl: '',
				path,
			}
		},
		watch: {
			locaRefuse(newval, oldval) {
				if (!newval) {
					this.toResetUtilLoca()
				}
			}
			// #ifndef H5
			,
			changeOnAddr(newval, oldval) {
				let {
					noloca,
				} = this.noChangeLoca
				if (newval && noloca) {
					this.initUtilLocaData()
				}
			},
			noChangeLoca(newval, oldval) {
				setTimeout(() => {
					let {
						lat,
						lng,
						unix = 0
					} = this.changeOnAddr
					let {
						noloca
					} = this.noChangeLoca
					let cur_unix = this.$util.DateToUnix(this.$util.formatTime(new Date(), 'YY-M-D h:m:s'))
					if (noloca && ((!lat && !lng) || !unix || (unix && (cur_unix - unix >= 1)))) {
						this.getUtilLocation()
					}
				}, 800)
			}
			// #endif
		},
		methods: {
			...mapActions(['getConfigInfo', 'getUserInfo', 'getCityList',
				'getMapIndex', 'getMapList', 'addScanRecord', 'updateScanRecord',
				'updateCommonOptions'
			]),
			...mapMutations(['updateUserItem', 'updateServiceItem', 'updateTechnicianItem', 'updateMapItem',
				'updateDynamicItem', 'updateShopstoreItem'
			]),
			async initIndex(refresh = false) {
				let {
					pid = 0,
						launch = 0
				} = this.options
				let code = this.scanRecordId
				// #ifdef H5
				code = this.$util.getQueryString('code')
				// #endif
				if (pid && !code) {
					this.addScanRecord({
						type: 2,
						qr_id: pid,
						is_qr: 0
					})
				}
				let {
					id: uid = 0
				} = this.userInfo
				if (launch != 1154 && pid && !code && !uid) {
					await this.getUserInfo()
				}

				if (!this.configInfo.id || refresh) {
					await this.getConfigInfo()
				}

				this.$util.setNavigationBarColor({
					bg: this.primaryColor
				})
				let cur_time = new Date(Math.ceil(new Date().getTime()))
				this.startYear = this.$util.formatTime(cur_time, 'YY')
				this.toDay = this.$util.formatTime(cur_time, 'YY-M-D')

				let {
					plugAuth = {},
						realtime_location = 0
				} = this.configInfo
				let {
					map = false
				} = plugAuth
				if (!map) {
					this.isLoad = true
					this.loading = false
					this.$util.hideAll()
					return
				}
				await this.getMapIndex()
				await this.isNotLoca()
				this.updateMapItem({
					key: 'pageActive',
					val: true
				})
				this.updateTechnicianItem({
					key: 'pageActive',
					val: false
				})
				this.isLoad = true
			},
			async initRefresh() {
				await this.initIndex(true)
			},
			async initNavTitle(isShow = 0) {
				let {
					tabBar
				} = this.configInfo
				if (tabBar && tabBar.length > 0) {
					let ind = tabBar.findIndex(item => {
						return item.id == 7
					})
					let navTitle = ind == -1 ? '地图找人' : tabBar[ind].name
					this.navTitle = navTitle
					uni.setNavigationBarTitle({
						title: navTitle
					})
					if (this.scanRecordId) {
						this.updateScanRecord()
					}
					if (!isShow) {
						// #ifdef H5
						this.$jweixin.initJssdk(() => {
							this.toAppShare()
						})
						this.updateUserItem({
							key: 'appShare',
							val: false
						})
						// #endif
					}
				}
			},
			async toResetUtilLoca() {
				// #ifdef APP-PLUS
				let {
					lat: locaLat = 0
				} = this.location
				let {
					appCheckLocaStatus = null
				} = this
				if (!locaLat && appCheckLocaStatus == 1 && this.pageActive) {
					let {
						lng = 0,
							lat = 0
					} = await this.$util.getUtilLocation()
					if (!lat && !lng) return
					await this.getList()
					let updateArr = ['updateServiceItem', 'updateTechnicianItem',
						'updateDynamicItem', 'updateShopstoreItem'
					]
					updateArr.map(item => {
						this[item]({
							key: 'pageActive',
							val: false
						})
					})
				}
				// #endif
			},
			toConfirmAppCheckAuth() {
				let {
					appMethod
				} = this
				this[appMethod]()
			},
			async toOpenLocation() {
				// #ifdef APP-PLUS
				if (plus.os.name == 'Android' && plus.navigator.checkPermission(
						'android.permission.ACCESS_FINE_LOCATION') ===
					'undetermined') {
					this.appMethod = 'toConfirmOpenLoca'
					this.$refs.app_check_item.open()
				} else {
					this.toConfirmOpenLoca()
				}
				// #endif
				// #ifndef APP-PLUS
				this.toConfirmOpenLoca()
				// #endif
			},
			async toConfirmOpenLoca() {
				// #ifdef MP-WEIXIN
				let privacyCheck = this.$refs.user_privacy.check()
				if (privacyCheck) {
					this.$refs.user_privacy.open()
					return
				}
				// #endif 
				this.initRefresh()
			},
			async isNotLoca() {
				let {
					location,
					locaRefuse,
					changeAddr
				} = this

				let {
					realtime_location = 0
				} = this.configInfo


				let {
					status: coach_status = 0,
					coach_position = 0
				} = this.userCoachStatus


				// #ifdef H5
				if (coach_position && coach_status == 2 && (location.lat && location.address != '暂未获取到位置信息' && !
						realtime_location)) {
					this.updateUserItem({
						key: 'isChangeCoachLoca',
						val: true
					})
				}
				// #endif


				// #ifdef APP-PLUS
				if (!locaRefuse && (!location.lat || (location.lat && location.address == '暂未获取到位置信息') || (
						realtime_location && !changeAddr))) {
					// #endif
					// #ifndef APP-PLUS
					if (!location.lat || (location.lat && location.address == '暂未获取到位置信息') || (
							realtime_location && !changeAddr)) {
						// #endif

						// #ifdef MP-WEIXIN
						let privacyCheck = this.$refs.user_privacy.check()
						if (privacyCheck || typeof(privacyCheck) == 'string') {
							if (privacyCheck) {
								this.$refs.user_privacy.open()
							}
							this.isLoad = true
							this.loading = false
							this.$util.hideAll()
							return
						}
						// #endif

						// #ifndef H5
						if (coach_position && coach_status == 2) {
							let {
								lat: change_lat = 0,
								lng: change_lng = 0,
								unix = 0
							} = this.changeOnAddr
							let cur_unix = this.$util.DateToUnix(this.$util.formatTime(new Date(), 'YY-M-D h:m:s'))
							let noloca = change_lat && change_lng && (unix && (cur_unix - unix < 3)) ? false : true
							if (!noloca) {
								let loca = Object.assign({}, this.location, {
									lat: change_lat,
									lng: change_lng,
									is_util_loca: 1
								})
								this.updateUserItem({
									key: 'location',
									val: loca
								})
							}
							this.updateUserItem({
								key: 'noChangeLoca',
								val: {
									noloca
								}
							})
							if (this.noChangeLoca.noloca) return
							this.initUtilLocaData()
						} else {
							this.getUtilLocation()
						}
						return
						// #endif

						// #ifdef H5
						await this.$util.getUtilLocation()
						// #endif
					}
					this.initUtilLocaData()
				},
				async getUtilLocation() {
						await this.$util.getUtilLocation()
						this.initUtilLocaData()
					},
					async initUtilLocaData() {
							// #ifndef H5
							this.updateUserItem({
								key: 'noChangeLoca',
								val: {
									noloca: false
								}
							})
							// #endif 
							await this.getList()
							let {
								changeAddr
							} = this
							let {
								realtime_location = 0
							} = this.configInfo

							let {
								lat = 0, lng = 0, is_util_loca = 0, isIp = true
							} = this.location
							if (lat && lng && (
									is_util_loca || (
										realtime_location && !changeAddr))) {
								this.$util.getMapInfo(isIp, true, {}, changeAddr)
							}
						},
						toAppShare() {
							let {
								id: pid = 0
							} = this.userInfo
							let {
								navTitle: title
							} = this
							let {
								siteroot
							} = siteInfo
							let url = siteroot.split('/index.php')[0]
							let href = `${url}/h5/#/pages/map?pid=${pid}`
							let {
								app_logo
							} = this.configInfo
							let imageUrl = app_logo || ''
							this.$jweixin.showOptionMenu()
							this.$jweixin.shareAppMessage(title, '', href, imageUrl)
							this.$jweixin.shareTimelineMessage(title, href, imageUrl)
						},
						initFixHeight(val) {
							this.popupHeight = val
						},
						toPopup(refs_key, method) {
							this.$refs[refs_key][method]()
							this.popupTap = method === 'open' ? true : false
						},
						// 选择地区
						async toChooseLocation() {
								// #ifdef APP-PLUS
								if (plus.os.name == 'Android' && plus.navigator.checkPermission(
										'android.permission.ACCESS_FINE_LOCATION') ===
									'undetermined') {
									this.appMethod = 'toConfirmChooseLoca'
									this.$refs.app_check_item.open()
								} else {
									this.toConfirmChooseLoca()
								}
								// #endif
								// #ifndef APP-PLUS
								this.toConfirmChooseLoca()
								// #endif
							},
							async toConfirmChooseLoca() {
									// #ifdef MP-WEIXIN
									let privacyCheck = this.$refs.user_privacy.check()
									if (privacyCheck) {
										this.$refs.user_privacy.open()
										return
									}
									// #endif  
									let location = await this.$util.chooseLocation(2)
									if (!location.lat) return
									this.updateUserItem({
										key: 'location',
										val: location
									})
									this.updateUserItem({
										key: 'changeAddr',
										val: true
									})
									await this.getList(true)
								},
								handerTabChange(index) {
									let {
										id: cate_id
									} = this.service_cate[index]
									let param = Object.assign({}, this.param, {
										cate_id,
										activeIndex: index
									})
									this.updateMapItem({
										key: 'param',
										val: param
									})
									this.getList()
								},
								async getList(initCity = false) {
										let {
											lat = 0, lng = 0
										} = this.location

										if (initCity || (lat && lng && !this.technicianParam.city_id)) {
											await this.getCityList({
												lat,
												lng,
												change: 1
											})
										}

										// #ifdef APP-PLUS

										if (!lat && !lng) {
											this.updateMapItem({
												key: 'map',
												val: {
													latitude: 0,
													longitude: 0,
													scale: 16,
													controls: []
												}
											})
											this.updateMapItem({
												key: 'mapList',
												val: []
											})
											this.isLoad = true
											this.loading = false
											this.$util.hideAll()
											return
										}
										// #endif

										this.loading = true
										let param = Object.assign({}, this.param, {
											lat,
											lng
										})

										let {
											cate_id = 0
										} = param
										let ind = this.service_cate.findIndex(item => {
											return item.id == cate_id
										})
										ind = ind == -1 ? 0 : ind
										cate_id = this.service_cate[ind].id
										param.cate_id = cate_id

										let params = Object.assign({}, this.param, {
											cate_id
										})
										this.updateMapItem({
											key: 'param',
											val: params
										})
										this.updateMapItem({
											key: 'covers',
											val: []
										})

										await this.getMapList(param)
										this.$util.hideAll()
										this.loading = false
									},
									async toShowPopup(index, key) {
											this.$refs.technician_list_popup.toShowPopup(this.list.data[index],
												key)
										},
										async toCollect(index) {
												let {
													id,
													is_collect,
													collect_num
												} = this.list.data[index]
												let methodModel = is_collect ? 'delCollect' : 'addCollect'
												await this.$api.mine[methodModel]({
													coach_id: id
												})
												this.$util.showToast({
													title: is_collect ? '取消成功' : '收藏成功'
												})
												this.list.data[index].is_collect = is_collect == 1 ? 0 : 1
												this.list.data[index].collect_num = is_collect == 1 ? collect_num -
													1 :
													collect_num + 1
											},
											async goDetail(e) {
													let {
														markerId
													} = e.detail
													let {
														id,
														distance
													} = this.mapList[markerId]
													let data = await this.$api.service.coachInfo({
														id
													})
													data.distance = distance
													data.star = (data.star * 1).toFixed(1)
													this.detail = data
													this.$refs.technician_info_item.open()
													this.popupTap = true
												},
												// 技-师详情
												goInfo() {
													let {
														id: uid = 0,
														phone = ''
													} = this.userInfo

													let {
														force_login,
														short_code_status = 0,
														bind_phone_type = 0
													} = this.configInfo
													if (!uid || (force_login == 1 && short_code_status &&
															bind_phone_type && !phone)) {
														this.updateUserItem({
															key: 'loginPage',
															val: `/pages/map`
														})
														this.$util.goUrl({
															url: !uid ? `/pages/login` : `/user/pages/phone`
														})
														return
													}

													let {
														id,
													} = this.detail
													this.$refs.technician_info_item.close()
													this.popupTap = false
													this.$util.goUrl({
														// url: `/user/pages/technician-info?id=${id}`
														url: `/userA/pages/worker-data?id=${id}`
													})
												},
			},
			filters: {
				handleAddrText(val) {
					let text = `定位中...`
					if (val && val.lat) {
						let {
							address = '',
								address_info = ''
						} = val
						if (address || address_info) {
							if (!address_info) {
								let arr = address.split(' ')
								address_info = arr[arr.length - 1]
							}
							text = address_info
						}
					}
					return text
				},
				handleCityText(val) {
					let text = `未知城市`
					if (val && val.title) {
						text = val.title
					}
					return text
				}
			}
		}
</script>


<style lang="scss">
	.pages-map {
		.map-info {
			.iconjuli {
				font-size: 30rpx;
			}

			.icon-down {
				color: #868686;
			}

		}

		.tab-info {
			.tab-list-item {
				width: 100%;
			}

			.tab-select-item {
				height: 44rpx;
				box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.8);
			}
		}

		.map-box {
			width: 100%;
		}

		.search-popup {
			width: calc(100% - 164rpx);
			height: 100vh;

			.list-item {
				width: 160rpx;
				height: 70rpx;
				background: #F5F5F5;

				.icon-guanbi-fill.abs {
					top: -15rpx;
					right: 0;
					font-size: 50rpx;
				}
			}

			.list-item:nth-child(3n) {
				margin-right: 0;
			}

			.search-btn {
				width: 230rpx;
				height: 80rpx;
				border: 1rpx solid #C7C7C7;
				transform: rotateZ(360deg);
			}
		}

		.technician-info-popup {
			width: 680rpx;
			overflow: hidden;

			.work-img {
				width: 680rpx;
				height: 680rpx;
			}

			.service-label {
				min-width: 88rpx;
				height: 32rpx;
				padding: 0 10rpx;
				color: #EBDDB1;
				background: linear-gradient(270deg, #4C545A 0%, #282B34 100%);
				border-radius: 4rpx;
			}

			.time-label {

				.near-text {
					width: 100rpx;
					height: 33rpx;
					background: #F5F5F5;
					border-radius: 3rpx 0 0 3rpx;
				}

				.near-time {
					width: 66rpx;
					height: 33rpx;
					border-radius: 0 3rpx 3rpx 0;

					.bg {
						opacity: 0.1;
						top: 0;
						left: 0;
						right: 0;
						bottom: 0;
						z-index: 1;
						border-radius: 0 3rpx 3rpx 0;
					}
				}
			}


			.icondianpu {
				margin-right: 6rpx;
			}

			.iconpingfen1 {
				font-size: 24rpx;
				background-image: -webkit-linear-gradient(270deg, #FAD961 0%, #F76B1C 100%);
			}

			.star-text {
				height: 26rpx;
				color: #FF9519;
				margin-left: 6rpx;
			}

			.line {
				width: 1rpx;
				height: 11rpx;
				background: #979797;
				margin: 0 18rpx;
			}

			.introduce-info {
				width: 630rpx;
				max-height: 245rpx;
				overflow-y: auto;
				background: #F9F9F9;
			}

		}

		.icon-close {
			font-size: 60rpx;
		}
	}
</style>